<template>
    <div class="ladder-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">

            <el-form ref="form" :model="state.ladderForm">
                <el-table :data="state.ladderForm.list" style="width: 100%">
                    <el-table-column v-for="attribute in state.ladderForm.attributeList" :key="attribute.key"
                        :label="attribute.name" width="300">
                        <template v-slot="scope">
                            <div class="input-group">
                                <el-input style="width: 100px; margin-right: 10px;"
                                    v-model="scope.row.row[attribute.key].leftValue"></el-input>
                                ~
                                <el-input style="width: 100px; margin-right: 10px;"
                                    v-model="scope.row.row[attribute.key].rightValue"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="金额" prop="cost">
                        <template v-slot="scope">
                            <el-input style="width: 100px; margin-right: 10px;" v-model="scope.row.cost"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button @click="onAdd" size="default">新增</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="ladderDialog">
import { reactive } from 'vue';
import { useLadderCostApi } from '/@/api/calculate/ladderCost';

// 引入 api 请求接口
const ladderCostApi = useLadderCostApi();

// 定义变量内容
const state = reactive<LadderCostRowState>({
    bizCode: '',
    ladderForm: {
        attributeList: [],
        list: [],
    },
    dialog: {
        isShowDialog: false,
        customProduct: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});

// 打开弹窗
async function openDialog(bizCode: string) {
    state.bizCode = bizCode;
    const param = {
        "bizCode": bizCode,
    }
    const result = await ladderCostApi.ladderCostList(param);
    if (result.data == null)
        return Promise.resolve(true);
    const ladderCostResult: LadderCostResult = result.data;
    state.ladderForm = ladderCostResult;

    state.dialog.title = '修改阶梯价格配置';
    state.dialog.submitTxt = '修 改';
    state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
    closeDialog();
};

// 新增
const onAdd = () => {
    const ladderItem = state.ladderForm.list[0];

    state.ladderForm.list.push(ladderItem);
}

// 提交
async function onSubmit() {
    const param = {
        bizCode: state.bizCode,
        list: state.ladderForm.list,
    }

    await ladderCostApi.saveLadderCost(param);
    closeDialog(); // 关闭弹窗
};

// 暴露变量
defineExpose({
    openDialog,
});
</script>

<style scoped>
.input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>